<template>
  <CellGroup>
    <Cell v-for="item of companies" :title="item.title">
      <span>{{ item.value }}</span>
    </Cell>
  </CellGroup>
</template>
<script setup>
  import dayjs from 'dayjs';
  import { useRoute } from 'vue-router';
  import { ref, watch, inject, onMounted } from 'vue';
  import { CellGroup, Cell } from 'vant';

  import helpers from '~/libs/helpers.js';

  const $route = useRoute();

  const mappings = [
    { title: '公司名称', key: 'org_name_cn' },
    { title: '曾用名', key: 'pre_name_cn' },
    { title: '所属省份', key: 'provincial_name' },
    { title: '实际控制人', key: 'actual_controller' },
    {
      title: '所有制',
      key: 'classi_name',
      getValue: item => {
        return `${item.classi_name} / ${item.affiliate_industry.ind_name}`;
      }
    },
    { title: '主营业务', key: 'main_operation_business' },
    { title: '经营范围', key: 'operating_scope' },
    { title: '公司简介', key: 'org_cn_introduction' },
    { title: '董事长', key: 'chairman' },
    { title: '法人代表', key: 'legal_representative' },
    { title: '总经理', key: 'general_manager' },
    { title: '董秘', key: 'secretary' },
    { title: '成立日期', getValue: item => dayjs(item.established_date).format('YYYY-MM-DD') },
    { title: '注册资本', getValue: item => helpers.friendlyNumbers(item.reg_asset) },
    { title: '员工人数', key: 'staff_num' },
    { title: '管理层人数', key: 'executives_nums' },
    { title: '上市日期', getValue: item => dayjs(item.listed_date).format('YYYY-MM-DD') },
    { title: '发行量', getValue: item => helpers.friendlyNumbers(item.actual_issue_vol) },
    { title: '发行价格', key: 'issue_price' },
    { title: '募集资金', getValue: item => helpers.friendlyNumbers(item.actual_rc_net_amt) },
    { title: '发行市盈率', key: 'pe_after_issuing' },
    { title: '网上中签率', getValue: item => (item.online_success_rate_of_issue || 0).toFixed(2) + '%' },
    { title: '联系电话', key: 'telephone' },
    { title: '邮政编码', key: 'postcode' },
    { title: '传真', key: 'fax' },
    { title: '电子邮箱', key: 'email' },
    {
      title: '公司网址',
      key: 'org_website',
      getValue: item => {
        let site = (item.org_website || '').split(';')[0];

        return `http://${site}`;
      }
    },
    { title: '注册地址', key: 'reg_address_cn' },
    { title: '办公地址', key: 'office_address_cn' }
  ];

  const $http = inject('$http');

  const companies = ref([]);
  const currentShare = ref('');

  async function loadCompany() {
    if (!currentShare.value) {
      return;
    }

    let res = await $http.get(`/api/shares/${currentShare.value}/company`);

    companies.value = mappings.map(m => {
      if (m.getValue && typeof m.getValue == 'function') {
        return {
          title: m.title,
          value: m.getValue(res.data)
        };
      } else {
        return {
          title: m.title,
          value: res.data[m.key]
        };
      }
    });
  }

  watch($route, () => {
    currentShare.value = $route.params.code;
  });

  onMounted(() => {
    currentShare.value = $route.params.code;

    loadCompany();
  });
</script>
<style lang="less" scoped>
  .van-cell {
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;

    > :deep(.van-cell__title) {
      font-weight: bold;
      flex: none;
      width: 80px;
    }

    > :deep(.van-cell__value) {
      display: flex;
      flex: 2;
      width: 100%;
      text-align: left;
      flex-flow: row wrap;
    }
  }
</style>
